<template>
  <div class="blog-menu">
    <div class="build-btn">
      <el-button type="primary" @click="goCreateBlog">点击发布</el-button>
    </div>
    <el-collapse class="collapse" v-model="activeNames">
      <el-collapse-item :name="item.name" v-for="item in list" :key="item.id">
        <template slot="title">
          <icon-svg class="collapse-oneLevel-icon" :name="item.icon"></icon-svg>
          <span class="collapse-title">{{ item.name }}</span>
        </template>
        <div
          :class="[activeItem === i.route ? 'active' : '', 'collapse-text']"
          @click="clickOption(i.route, i.route)"
          v-for="i in item.children"
          :key="i.id"
        >
          <span class="collapse-two-icon">
            <icon-svg :name="i.icon"></icon-svg>
          </span>
          <span class="collapse-two-text">{{ i.name }}</span>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  // 第一次watch不会执行
  created() {
    this.activeItem = this.$route.name
  },
  beforeRouteUpdate(to, from, next) {
    this.activeItem = this.$route.name
    next()
  },
  data() {
    return {
      activeNames: ['管理', '数据', '用户'],
      activeItem: 'manage-edit-content',
      list: [
        {
          name: '管理',
          id: 1,
          icon: 'manageIn',
          children: [
            { name: '内容管理', id: 11, icon: 'contentManage', route: 'manage-edit-content' },
            // { name: '评论管理', id: 12, icon: 'commentManage', route: 'manage-edit-comment' },
            { name: '专栏管理', id: 13, icon: 'columsManage', route: 'manage-edit-column' }
          ]
        },
        {
          name: '数据',
          id: 2,
          icon: 'data',
          children: [{ name: '作品数据', id: 21, icon: 'worksData', route: 'manage-data-works' }]
        },
        {
          name: '用户',
          id: 3,
          icon: 'user',
          children: [
            { name: '修改密码', id: 31, icon: 'revisePassword', route: 'manage-user-password' },
            { name: '添加管理员', id: 32, icon: 'addManage', route: 'manage-user-add' }
          ]
        }
      ]
    }
  },
  methods: {
    goCreateBlog() {
      this.$router.push({ name: 'blog-create' })
    },
    clickOption(route, name) {
      this.activeItem = route
      this.$router.push({ name: name })
    }
  }
}
</script>

<style lang="scss">
#blog-main {
  .blog-menu {
    min-width: 200px;
    .build-btn {
      text-align: center;
      margin-bottom: 20px;
    }
    .collapse {
      border-bottom: none;
      // 每一项的标题
      .el-collapse-item__header {
        background: $theme-background;
      }
      .el-collapse-item__content {
        padding-bottom: 0;
      }
      // 每个子项
      .el-collapse-item__wrap {
        background: $theme-background;
      }
      .el-icon-arrow-right {
        margin-right: 15px;
      }

      .collapse-oneLevel-icon {
        margin-left: 20px;
        font-size: 15px;
        font-weight: bold;
      }

      .collapse-title {
        display: inline-block;
        margin-left: 10px;
        color: #333;
        font-size: 15px;
        font-weight: bold;
        opacity: 0.85;
      }

      .collapse-text {
        position: relative;
        padding: 3px 0 3px 35px;
        cursor: pointer;
        &.active {
          color: #42a8e3;
          background: #ebeaea;
        }
        &:hover {
          color: #42a8e3;
          background: #ebeaea;
        }
        .collapse-two-text {
          // color: #666;
          font-size: 14px;
          font-weight: 400;
          line-height: 40px;
        }
        .collapse-two-icon {
          display: inline-block;
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translate(0, -50%);
          width: 30px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          background: #42a8e3;
          border-radius: 60px;
          font-size: 12px;
          font-weight: 400;
          color: #fff;
        }
      }
    }
  }
}
</style>
